<template>
    <div class="inquiry">
        <div class="inquiry__main">
            <div class="logo">
                <template v-if="orderInfo.logoImage">
                    <img :src="orderInfo.logoImage" height="48px;" alt="">
                </template>
                <template v-else>
                    <span v-if="orderInfo.cropName">{{orderInfo.cropName}}</span>
                </template>
            </div>
            <div class="order-title">
                <div class="date">{{orderInfo.createTime}}</div>
                <div class="order-no">订货单编号：{{orderInfo.sn}}</div>
                <div class="order-good-count">商品总数：{{orderInfo.goodsCount}}</div>
            </div>
            <div class="order-good-list">
                <table class="table">
                    <thead>
                        <tr>
                            <th>品牌</th>
                            <th>型号</th>
                            <th>商品信息</th>
                            <th>数量</th>
                            <th>单价</th>
                            <th>小计</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in orderList">
                            <td>{{item.brandName}}</td>
                            <td>{{item.skuSn}}</td>
                            <td>{{item.skuName}}</td>
                            <td>{{item.quantity}}</td>
                            <td>
                                <template v-if="item.skuPrice == 0">待报价</template>
                                <template v-else>¥ {{item.skuPrice}}</template>
                            </td>
                            <td class="price">
                                <template v-if="item.totalPrice == 0">待报价</template>
                                <template v-else>¥ {{item.totalPrice}}</template>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="order-total">
                <!--总价： <span>¥{{orderInfo.totalPrices}}</span>-->
            </div>
            <div class="share">
                <div class="share__item copyLink" :data-clipboard-text="qrText" @mouseover="over('link')" @mouseleave="leave('link')" @click="copyLink">
                    <img class="share__icon" :src="shareIcon.link" alt="">
                    <div class="share__title">复制链接</div>
                </div>
                <div class="share__item" @mouseover="over('wx')" @mouseleave="leave('wx')" @click="wxShare()">
                    <img class="share__icon" :src="shareIcon.wx" alt="">
                    <div class="share__title">发送给微信好友</div>
                </div>
                <div class="share__item" @mouseover="over('excel')" @mouseleave="leave('excel')" @click="exportExcel()">
                    <img class="share__icon" :src="shareIcon.excel" alt="">
                    <div class="share__title">导出Excel表格</div>
                </div>
            </div>
            <transition name="modal">
                <div v-if="showQrCode">
                    <div class="modal-mask">
                        <div class="modal-wrapper">
                            <div class="modal-container">
                                <div class="modal-title">
                                    WeChat 微信
                                    <span class="modal-close" @click="showQrCode=false">&times;</span>
                                </div>
                                <div class="modal-body">
                                    <div class="qr-code">
                                        <qrcode :cls="qrCls" :value="qrText" size="150" padding="0"></qrcode>
                                        <h5>微信扫码分享订货单</h5>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
    
            <!--<el-dialog title="WeChat 微信二维码" :visible.sync="showQrCode" size="tiny">
                            <div class="qr-code">
                                <qrcode :cls="qrCls" :value="qrText" size="150" padding="0"></qrcode>
                                <h5>微信扫码分享订货单</h5>
                            </div>
                        </el-dialog>-->
        </div>
    </div>
</template>


<script>
import service from '../service/Service'
import Clipboard from 'clipboard'
import QrcodeVue from 'qrcode.vue'
import API from '../service/API'
import { Message, Dialog, Button } from 'element-ui'
import { getBaseUrl, getQueryByName } from '../service/Utils'

export default {
    components: {
        qrcode: QrcodeVue,
        'el-dialog': Dialog,
        'el-button': Button,
    },
    head: {
        title: '订货单',
    },
    async asyncData (context) {
        let { data } = await service.getInquiryList(context.query.key, context)
        return {
            orderInfo: data.result.order,
            orderList: data.result.items,
            qrcode: {},
        }
    },
    data () {
        return {
            orderInfo: {},
            orderList: [],
            shareIcon: {
                link: require('~assets/images/link.png'),
                wx: require('~assets/images/wx.png'),
                qq: require('~assets/images/qq.png'),
                excel: require('~assets/images/excel.png'),
            },
            showQrCode: false,
            qrText: '',
            clipboard: {},
            qrCls: 'qrcode',
        }
    },
    mounted () {
        this.clipboard = new Clipboard('.copyLink')
        this.qrText = location.href
    },
    methods: {
        copyLink () {
            Message.success({
                message: '已复制到剪切板',
                duration: 800,
                customClass: 'toast',
                iconClass: 'el-icon-check',
            })
        },
        wxShare () {
            this.showQrCode = true
        },
        over (type) {
            this.shareIcon[type] = require('~assets/images/' + type + '_h.png')
        },
        leave (type) {
            this.shareIcon[type] = require('~assets/images/' + type + '.png')
        },
        exportExcel () {
            let form = document.createElement('form')
            document.body.appendChild(form)
            form.action = getBaseUrl(false) + API.order + '/' + getQueryByName('key') + '/export'
            form.method = 'get'
            form.submit()
        },
    },
}
</script>

<style lang="scss" scoped>
.inquiry {
    background: #f6f6f6;
    padding-top: 80px;
    height: 100%;
    .inquiry__main {
        background-color: #fff;
        width: 900px;
        margin: 0 auto;
        height: auto;
        margin-bottom: 80px;
        padding: 30px;
        position: relative;
        table {
            border-spacing: 0;
            border-collapse: collapse;
            width: 100%;
            max-width: 100%;
            margin-bottom: 20px;
            thead {
                background-color: #f9f9f9;
            }
            tr {
                border-bottom: 1px solid #e7e7e7;
            }
            tbody {
                td {
                    padding: 25px 8px;
                    color: #666;
                }
            }
            td,
            th {
                vertical-align: middle;
                text-align: center;
            }
            th {
                height: 50px;
                border: none;
            }
        }
    }
    .logo {
        text-align: center;
        padding: 50px 0 30px;
        img {
            max-height: 48px;
        }
        span {
            display: inline-block;
            margin-top: 4px;
            color: #666 !important;
            font-size: 28px;
            letter-spacing: 2px;
        }
    }

    .order-title {
        padding: 20px;
        div {
            display: inline-block;
            color: #999;
            font-size: 14px;
            vertical-align: center;
        }
        .date {
            margin-right: 30px;
        }
        .order-good-count {
            float: right;
        }
    }
    .order-total {
        color: #666;
        text-align: right;
        span {
            font-size: 18px;
            margin-right: 30px;
        }
    }

    .qr-code {
        margin: 10px auto 15px;
        width: 160px;
        height: 190px;
        h5 {
            text-align: center;
            margin-bottom: 50px;
            color: #666;
        }
    }

    .qrcode {
        width: 140px;
        margin: 0 auto;
    }


    .share {
        margin: 80px 0 40px;
        text-align: center;
        .share__item {
            cursor: pointer;
            display: inline-block;
            width: 180px;
            text-align: center;
        }
        .share__icon {
            margin-bottom: 15px;
        }
    }
}

.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
}

.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
}

.modal-container {
    height: 300px;
    width: 300px;
    margin: 0px auto;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    transition: all .3s ease;
    font-family: Helvetica, Arial, sans-serif;
}

.modal-header {
    background-color: #f9f9f9;
    margin-top: 0;
}

.modal-body {
    margin: 20px 0;
    font-size: 15px;
}

.modal-default-button {
    float: right;
}

.modal-title {
    background-color: #34a853;
    color: #fff;
    padding: 10px 15px;
    font-size: 17px;
}

.modal-close {
    float: right;
    cursor: pointer;
    padding: 5px 10px;
    margin: -5px -10px;
}

.modal-close:hover {
    color: #ddd;
}

.copy-success {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
}

.copy-success .modal-container {
    background-color: rgba(30, 30, 30, 0.8)
}

.copy-success h3 {
    padding: 15px;
    font-size: 18px;
    color: #fff;
}






















/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
    opacity: 0;
}

.modal-leave-active {
    opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
</style>